<template>
  <div>
    <div v-show="!isShowEdit && !isShowDetail">
      <div class="table-page-search-wrapper">
        <el-card>
          <el-form inline :model="queryParams" @submit.native.prevent>
            <el-row :gutter="48">
              <!-- 搜索item项 -->
              <el-col :md="8" :sm="24">
                <el-form-item label="工区" prop="roleName">
                  <el-cascader
                    ref="refCascader"
                    :props="cascaderProps"
                    placeholder="请选择工区"
                    style="width: 100%"
                    :clearable="false"
                    @change="cascaderChange"
                    v-model="cascaderValue"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="8" :sm="24">
                <el-form-item label="设计是否关联审批模型" prop="isAssociation">
                  <el-select
                    v-model="queryParams.isAssociation"
                    placeholder="请选择是否关联模型"
                    style="width: 100%"
                    clearable
                  >
                    <el-option v-for="item in isAssociationList" :key="item.id" :label="item.label" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="(isAdvanced && 8) || 0" :sm="(isAdvanced && 24) || 0">
                <el-form-item label="施工是否关联审批模型" prop="isConstruction">
                  <el-select
                    v-model="queryParams.isConstruction"
                    placeholder="请选择是否关联模型"
                    style="width: 100%"
                    clearable
                  >
                    <el-option v-for="item in isAssociationList" :key="item.id" :label="item.label" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 查询按钮 -->
              <el-col :md="(!isAdvanced && 8) || 24" :sm="24">
                <el-form-item>
                  <span class="table-page-search-submitButtons">
                    <el-button type="primary" @click="handleSearch">查 询</el-button>
                    <el-button style="margin-left: 8px" @click="resetQuery">重 置</el-button>
                    <el-link
                      type="primary"
                      :underline="false"
                      @click="isAdvanced = !isAdvanced"
                      style="margin-left: 8px"
                    >
                      {{ isAdvanced ? '收起' : '展开' }}
                      <i :class="isAdvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
                    </el-link>
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <div class="table-block">
        <el-card>
          <div slot="header" class="clearfix">
            <!-- 左侧修改新增按钮组 -->
            <div class="left">
              <el-button
                type="primary"
                v-if="menuButtonPermissions.includes('gz-metro-server.designSetting.add')"
                @click="handleAdd('新增', null)"
              >新 增</el-button
              >
              <el-button v-else type="primary" style="visibility: hidden">新 增</el-button>
            </div>
            <!-- 右侧按钮组 -->
            <div class="right">
              <div class="table-operator card-right">
                <!-- <el-button icon="el-icon-download">导 出</el-button> -->
              </div>
            </div>
          </div>
          <!-- 表格数据列表 -->
          <el-table
            :data="tableList"
            stripe
            :key="Math.random()"
            :height="isAdvanced ? isAdvancedtableMaxHeigth : tableMaxHeigth"
            row-key="id"
          >
            <el-table-column prop="lineName" label="项目" align="center" show-overflow-tooltip />
            <el-table-column prop="lotName" label="分部" align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="workArea" label="工区" align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="projectName" label="审批名称" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="ownershipUnit" label="权属单位" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="linkName" label="权属单位审批人" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="linkPhone" label="联系方式" align="center" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="linkPhone" label="穿越类型" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ $dictTranslation(scope.row.throughType+'', throughTypeList) }}
              </template>
            </el-table-column>
            <el-table-column prop="linkPhone" label="敏感区类型" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ $dictTranslation(scope.row.areaType+'', sensitiveAreaTypeList) }}
              </template>
            </el-table-column>

            <el-table-column prop="isAssociation" label="设计方案审批模型" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.moduleId">
                  <span :class="scope.row.moduleId ? 'blurCircle' : 'yellowCircle'"></span>
                  {{ scope.row.moduleId ? '已关联' : '未关联' }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="isAssociation" label="施工方案审批模型" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.constructionModuleId">
                  <span :class="scope.row.constructionModuleId ? 'blurCircle' : 'yellowCircle'"></span>
                  {{ scope.row.constructionModuleId ? '已关联' : '未关联' }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="80">
              <template #default="{ row }">
                <el-button
                  type="text"
                  icon="el-icon-view"
                  class="table-button-size"
                  title="查看"
                  @click="handleSee('查看', row)"
                ></el-button>
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  class="table-button-size"
                  title="编辑"
                  @click="handleAdd('编辑', row)"
                  v-if="menuButtonPermissions.includes('gz-metro-server.designSetting.edit')"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getTableList"
          />
        </el-card>
      </div>
    </div>
    <edit
      ref="editRef"
      v-if="isShowEdit"
      :addEditStr="addEditStr"
      :rowData="rowData"
      :orgId="queryParams.orgId"
      @isShowEditChange="isShowEditChange"
      :throughTypeList="throughTypeList"
      :sensitiveAreaTypeList="sensitiveAreaTypeList"
      :buildingTypeList="buildingTypeList"
      @getTableList="getTableList"
    ></edit>
    <detail
      v-if="isShowDetail"
      :addEditStr="addEditStr"
      @isShowDetailChange="isShowDetailChange"
      :rowData="rowData"
      :orgId="queryParams.orgId"
      :throughTypeList="throughTypeList"
      :sensitiveAreaTypeList="sensitiveAreaTypeList"
      :buildingTypeList="buildingTypeList"
    ></detail>
  </div>
</template>

<script>
import actions from '@/cros/actions'
import { getTreeByRole, getList, dictDataList } from '@/api/approvalSetting'
import Edit from './edit.vue'
import Detail from './detail.vue'
export default {
  name: 'ApprovalSetting',
  components: {
    Edit,
    Detail
  },
  data () {
    return {
      isAdvanced: false,
      isAdvancedtableMaxHeigth: document.body.offsetHeight - 500,
      isShowEdit: false,
      isShowDetail: false,
      isAssociationList: [
        {
          id: true,
          label: '已关联'
        },
        {
          id: false,
          label: '未关联'
        }
      ],
      tableList: [],
      // 查询参数
      queryParams: {
        isAssociation: '', // 是否关联审批模型
        orgId: '',
        pageNo: 1,
        pageSize: 10
      },
      addEditStr: '新增',
      rowData: {},
      menuButtonPermissions: [],
      throughTypeList: [],
      sensitiveAreaTypeList: [],
      buildingTypeList: [],
      tableMaxHeigth: 0,
      cascaderValue: [],
      cascaderProps: {
        value: 'id',
        label: 'name',
        children: 'subRes',
        leaf: 'leaf',
        expandTrigger: 'hover',
        lazy: true,
        lazyLoad: async (node, resolve) => {
          return this.getCascaderData(node, resolve)
        }
      },
      total: 0
    }
  },
  mounted () {
    dictDataList({
      dictName: '',
      dictType: 'sensitiveArea_type',
      dictValue: '',
      pageNo: 1,
      pageSize: 9999,
      searchType: 'project'
    }).then(res => {
      this.sensitiveAreaTypeList = res.data.list
    })
    dictDataList({
      dictName: '',
      dictType: 'through_type',
      dictValue: '',
      pageNo: 1,
      pageSize: 9999,
      searchType: 'project'
    }).then(res => {
      this.throughTypeList = res.data.list
    })
    dictDataList({
      dictName: '',
      dictType: 'building_type',
      dictValue: '',
      pageNo: 1,
      pageSize: 9999,
      searchType: 'project'
    }).then(res => {
      this.buildingTypeList = res.data.list
    })
    actions.onGlobalStateChange((state, prevState) => {
      this.menuButtonPermissions = state.menuButtonPermissions.map((v) => v.buttonKey)
    }, true)
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.setTableHeight)
    // 初始化表格高度
    this.setTableHeight()
  },
  methods: {
    async getCascaderData (node, resolve) {
      const { level } = node
      const res = await getTreeByRole({ parent: node.value || '', orgForm: '97' })
      res.data.forEach((v) => {
        v.leaf = v.childNum <= 0
      })
      if (level === 0) {
        this.getTableList()
      }
      return resolve(res.data)
    },
    cascaderChange () {
      this.queryParams.orgId = this.cascaderValue[this.cascaderValue.length - 1]
      this.getTableList()
    },
    beforeDestroy () {
      // 组件销毁前移除事件监听
      window.removeEventListener('resize', this.setTableHeight)
    },
    setTableHeight () {
      this.$nextTick(() => {
        this.tableMaxHeigth = document.body.offsetHeight - 320
        this.isAdvancedtableMaxHeigth = document.body.offsetHeight - 362
      })
    },
    handleSearch () {
      this.queryParams.pageNo = 1
      this.getTableList()
    },
    // 获取列表数据
    async getTableList () {
      const res = await getList(this.queryParams)
      this.tableList = res.data.list
      this.total = res.data.totalCount
    },
    // 重置
    resetQuery () {
      this.queryParams.isAssociation = ''
      this.queryParams.isConstruction = ''
      this.cascaderValue = []
      this.queryParams.pageNo = 1
      this.queryParams.orgId = ''
      this.getTableList()
    },
    // 新增 / 编辑
    handleAdd (str, row) {
      if (this.cascaderValue.length <= 0 && !row) return this.$message.warning('请先选择工区')
      this.isShowEdit = true
      this.addEditStr = str
      this.rowData = JSON.parse(JSON.stringify(row))
    },
    handleSee (str, row) {
      this.isShowDetail = true
      this.rowData = JSON.parse(JSON.stringify(row))
    },
    isShowEditChange () {
      this.isShowEdit = !this.isShowEdit
    },
    isShowDetailChange () {
      this.isShowDetail = !this.isShowDetail
    }
  }
}
</script>
<style scoped lang="scss">
.dataCount {
  cursor: pointer;
}
.blurCircle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #406da4;
}
.yellowCircle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #eca600;
}
</style>
